<template>
    <div id="index">
        <div class="index-banner">
            <div class="index-banner-text">
                <h3></h3>
                <h1>生活有时支配着一个人，支撑着他的躯体，完成着他的历程，然而生活又似乎并不真实，任人自生自灭</h1>
                <h2>——cloudoer</h2>
            </div>
        </div>
        <div class="index-about">
            <div class="index-a-info">
                <img src="@/assets/about.jpg"/>
                <p @click="testAjax()">cloudoer</p>
                <div>

                </div>
            </div>
        </div>
        <indexSwiper></indexSwiper>
        <indexArticle></indexArticle>
        <div class="index-bottom"><span>生活不易，唯以拼尽全力</span></div>
    </div>
</template>
<script>
import indexSwiper from '@/components/index/swiper'
import indexArticle from '@/components/index/article'

export default {
  name: 'index',
  components: {
    indexSwiper, indexArticle
  }
}
</script>
<style scoped>
  #index {
    width: 100%;
    margin: auto;
  }

  .index-banner {
    background: url(../../assets/banner.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 450px;
    padding: 1px;
    box-sizing: border-box;
    z-index: 1;
    position: relative;
  }

  .index-banner:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: inherit;
    -webkit-filter: blur(0.2rem);
    -moz-filter: blur(0.2rem);
    -o-filter: blur(0.2rem);
    -ms-filter: blur(0.2rem);
    filter: blur(0.2rem);
    z-index: 2;
  }

  .index-banner-text {
    position: absolute;
    color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 300px;
    text-align: center;
    z-index: 3;
  }

  .index-banner-text h1 {
    font: normal 1.7rem/3rem 微软雅黑;
    text-align: left;
  }

  .index-banner-text h2 {
    font: normal 1.5rem/3rem 微软雅黑;
    text-align: right;
  }

  .index-banner-text h3 {
    margin-bottom: 14rem;
  }

  .index-about {
    margin: 3rem 0;
  }

  .index-a-info img {
    height: 12rem;
    width: 12rem;
    border-radius: 50%;
  }

  .index-a-info p {
    font: normal 1rem/2rem 微软雅黑;
    color: #fff;
    width: 10rem;
    margin: auto;
    background-color: rgb(29, 205, 199);
    border-radius: 0.5rem;
  }

  /*.index-a-img p::after{
      content: "";
      display: inline-block;
      width: 400px;
      height: 2px;
      background-color: rgb(29,205,199);
  }
  .index-a-img p::before{
      content: "";
      position: relative;
      left: -10px;
      display: inline-block;
      width: 400px;
      height: 2px;
      background-color: rgb(29,205,199);
  }*/
  .index-a-info div {
    width: 1100px;
    height: 400px;
    padding: 3rem;
    text-align: left;
    border-radius: 2rem;
    margin: auto;
    border: 0.2rem solid rgb(29, 205, 199);
    border-top: none;
    position: relative;
    top: -30px;
  }

  .index-bottom {
    margin: 2rem;
  }

  .index-bottom span {
    font: normal 2rem/2.5rem 华文行楷;
    color: gray;
  }
</style>
